<template>
	<view class="page">
		<view class="section" v-for="(item, i) in list" :key="i" @click="navTo(item.txt)">
			<image :src="IP + item.url"></image>
			<view class="aside">
				<view class="name">{{item.name}}</view>
				<view class="title">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStudyList
	} from '../../network/study.js'
	import {
		IP
	} from '../../network/requestUrl.js'
	export default {
		data() {
			return {
				list: [],
				IP
			};
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				const result = await getStudyList()
				if (!result.flag) return
				this.list = result.data
			},
			navTo(txt) {
				uni.setStorageSync('code', txt)
				uni.navigateTo({
					url: './study/study'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		font-family: '微软雅黑';
		padding-bottom: 200px;

		.section {
			float: left;
			width: 50%;
			box-sizing: border-box;
			text-align: center;
			margin: 0;

			&:nth-of-type(even) {
				padding: 7px 10px 0px 5px;
			}

			&:nth-of-type(odd) {
				padding: 7px 5px 0px 10px;
			}

			&::after {
				content: "";
				display: block;
				clear: both;
			}

			image {
				width: 100%;
				height: 100px;
				border-radius: 5px 5px 0 0;
				margin: 0;
			}

			.aside {
				background-color: white;
				padding: 10px;
				border-radius: 0 0 2px 2px;
				text-align: left;
				margin: 0;

				.name {
					font-size: 16px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 5px;
				}

				.title {
					font-size: 12px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>
